<template>
	<div class="recommend-wrap">
		<h2 class="model-title">TA们正在求助拼团</h2>
		<ul class="model-list">
			<li class="model-list-item" v-for="item in recommendData">
				<img :src="item.headImg" alt="" class="item-avatar">
				<div class="item-info">
					<p class="name">{{item.userName}}</p>
					<em class="sub">{{item.slogan}}</em>
				</div>
				<div class="item-msg">
					<p class="msg">还差<em>{{item.num}}</em>人成团</p>
					<!--倒计时-->
					<div class="count-time">
						<countTime :endTime="item.time">
							<template slot="count-time" scope="props">
								还有<span>{{props.hour}}</span><span>:{{props.minute}}&nbsp;</span><span>:{{props.second}}</span>结束
							</template>
						</countTime>
					</div>
				</div>
				<a ca="pt_v170720_groupdetail_group_click" :href="'/cx/cxj/cxjweb/tuan/join/tuan-join.shtml?prizeCode='+ prizeCode +'&groupId=' + item.groupId" class="item-link">去成团</a>
			</li>
		</ul>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import countTime from './countTime.vue';
	import Vue from 'vue';
	import {Toast, MessageBox} from 'mint-ui';
	export default{
		props:[
			'recommendData',
			'slogan',
			'prizeCode'
		],
		watch:{
			'recommendData':'reandomSloganTuan'
		},
		components: {
			countTime
		},
		mounted (){
			this.reandomSloganTuan();
		},
		methods: {
			//随机抽选团口号
			reandomSloganTuan:function(){

				var _self = this;
				for(var i = 0; i < _self.recommendData.length; i++){
					_self.$set(_self.recommendData[i], 'slogan', _self.randomNum());
				}

			},
			//随机抽选团口号
			randomNum:function(){
				var _self = this,
					sloganCont;
				
				sloganCont = _self.slogan[Math.floor(Math.random() * _self.slogan.length)];

				return sloganCont;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../assets/css/common.scss";
	.recommend-wrap {
		padding:rem(11) rem(15) 0 rem(15);
		background-color:#fff;
	}
	.model-title{
		font-size:rem(15);
	}
	.model-list{
		
	}
	.model-list-item{
		border-bottom:1px solid #e7e7e7;
		padding:rem(14) 0;
		.item-avatar{
			width:rem(40);
			height:rem(40);
			border-radius:20px;
			display:inline-block;
			font-size:0;
		    vertical-align: middle;
		    margin-right:rem(8);
		}
		.item-info{
			width:rem(90);
			display:inline-block;
			font-size:rem(13);
			vertical-align: middle;
			.name{
				width:100%;
				height:rem(17);
				overflow:hidden;
				white-space: nowrap;
    			text-overflow: ellipsis;
				color:#333;
			}
			.sub{
				color:#999;
			}
		}
		.item-msg{
			width:rem(120);
			display:inline-block;
			vertical-align: middle;
			font-size:rem(13);
			color:#999;
			text-align:right;
			em{
				color:#ff6600;
			}
		}
		.item-link{
			width:rem(71);
			height:rem(30);
			line-height:rem(30);
			border:1px solid #ff6600;
			border-radius:15px;
			color:#ff6600;
			background-color:#ffefe5;
			font-size:rem(13);
			float:right;
			text-align:center;
			margin-top:rem(5);
		}
	}
	/*修补型样式*/
	.model-list-item:last-child{
		border:0;
	}
	/*倒计时样式补正*/
	.count-time{
		width:100%;
		overflow:hidden;
		span{
			width:rem(18.1);
			display:inline-block;
			white-space: nowrap;
			text-align: center;
		}
	}
</style>
